import { defineComponent, ref } from "vue";
import "./CityDataPanel.css";

export default defineComponent({
  name: "CityDataPanel",
  setup() {
    const cityStats = ref([
      {
        id: 1,
        label: "总人口",
        value: "1,245,678",
        unit: "人",
        icon: "👥",
        trend: "+2.3%",
        color: "#00d4ff",
      },
      {
        id: 2,
        label: "车辆数量",
        value: "328,456",
        unit: "辆",
        icon: "🚗",
        trend: "+5.1%",
        color: "#00ff88",
      },
      {
        id: 3,
        label: "建筑面积",
        value: "4,523",
        unit: "万㎡",
        icon: "🏢",
        trend: "+1.8%",
        color: "#ffd700",
      },
      {
        id: 4,
        label: "能源消耗",
        value: "8,912",
        unit: "MWh",
        icon: "⚡",
        trend: "-3.2%",
        color: "#ff6b6b",
      },
    ]);

    const systemStatus = ref([
      { name: "交通系统", status: "正常", rate: 98 },
      { name: "供水系统", status: "正常", rate: 99 },
      { name: "电力系统", status: "良好", rate: 96 },
      { name: "通信网络", status: "正常", rate: 100 },
    ]);

    return () => (
      <div class="city-data-panel">
        <div class="city-data-panel__header">
          <h3 class="city-data-panel__title">城市数据概览</h3>
        </div>

        <div class="city-data-panel__stats">
          {cityStats.value.map((stat) => (
            <div key={stat.id} class="city-data-panel__stat-card" style={`--card-color: ${stat.color}`}>
              <div class="city-data-panel__stat-icon">{stat.icon}</div>
              <div class="city-data-panel__stat-content">
                <div class="city-data-panel__stat-label">{stat.label}</div>
                <div class="city-data-panel__stat-value">
                  {stat.value}
                  <span class="city-data-panel__stat-unit">{stat.unit}</span>
                </div>
                <div class={`city-data-panel__stat-trend ${stat.trend.startsWith('+') ? 'up' : 'down'}`}>
                  {stat.trend}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div class="city-data-panel__systems">
          <h4 class="city-data-panel__subtitle">系统运行状态</h4>
          <div class="city-data-panel__system-list">
            {systemStatus.value.map((system) => (
              <div key={system.name} class="city-data-panel__system-item">
                <div class="city-data-panel__system-info">
                  <span class="city-data-panel__system-name">{system.name}</span>
                  <span class={`city-data-panel__system-status ${system.status === '正常' ? 'normal' : 'good'}`}>
                    {system.status}
                  </span>
                </div>
                <div class="city-data-panel__system-progress">
                  <div class="city-data-panel__system-bar" style={`width: ${system.rate}%`}></div>
                  <span class="city-data-panel__system-rate">{system.rate}%</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  },
});
